<template>
  <div>
    <el-form :inline="true" :model="ideaBack" class="demo-form-inline">
      <el-form-item label="状态">
        <el-select v-model="ideaBack.state" placeholder="请选择" clearable>
          <el-option label="已读" value="shanghai"></el-option>
          <el-option label="未读" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input
          v-model="ideaBack.phone"
          placeholder="请输入用户手机号码"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="反馈内容">
        <el-input
          v-model="ideaBack.text"
          placeholder="请输入反馈内容关键字"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button icon="el-icon-search">搜索</el-button>
        <el-button icon="el-icon-refresh">重置</el-button>
      </el-form-item>
    </el-form>

    <template>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="nickname" label="用户昵称" width="180">
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="180">
        </el-table-column>
        <el-table-column prop="is_read" label="状态"> </el-table-column>
        <el-table-column prop="created_at" label="提交时间"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button @click="lookClick(scope.row)" type="text" size="small"
              >查看</el-button
            >-
            <el-button @click="delData(scope.row)" type="text" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
  </div>
</template>
<script>
import { ideaBcak, delDate, lookCont } from '@/api/api3.js'

export default {
  data () {
    return {
      tableData: [],
      ideaBack: {
        state: '',
        phone: '',
        text: ''
      },
      page: 1,
      limit: 10// 一页多少条数据
    }
  },
  mounted () {
    ideaBcak(this.page, this.limit).then(res => {
      this.tableData = res.data.list
    })
  },
  methods: {
    lookClick (item) {
      // console.log(item)
      lookCont(item.id).then(res => {
        this.$alert(res.data.content, '反馈内容', {
          confirmButtonText: '确定',
          callback: app => {
            console.log(res.data.content)
            /*   this.$message({
                type: 'info',
                message: ` ${app}`
              }); */
          }
        })
      })
    },
    delData (item) {
      // console.log(item.id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delDate(item.id).then(ele => {
          console.log('删除成功', ele)
          ideaBcak(this.page, this.limit).then(ele => {
            console.log(ele.data.list)
            this.tableData = ele.data.list
          })
        }).catch(err => {
          console.log(err)
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }

}
</script>
